
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->


<!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
</head>
<link rel="stylesheet" href="http://img.mabach.cn/index.css">
<body>
<div id="app">


<h1>关联账号</h1>
    <el-form   label-width="100px"  width="400">
    <el-form-item label="账号">
        <el-input v-model="username"  placeholder="请输入账号"  ></el-input>
    </el-form-item>
        <el-form-item label="密码" prop="checkPass">
            <el-input  v-model="password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm()">注册并绑定</el-button>

            <el-button type="success" @click="submitForm()">绑定现有账号</el-button>
        </el-form-item>
    </el-form>

    <span>正在使用</span>
    <span th:text="${socialUser.provider}"></span>
    <span>关联</span> <br>

    <span th:text="${socialUser.nickNake}"></span><br>
    <img th:src="${socialUser.headImg}" />




</div>
</body>
<!-- import Vue before Element -->
<script src="http://img.mabach.cn/vue.js"></script>
<!-- import JavaScript -->
<script src="http://img.mabach.cn/elementui.js"></script>
<script src="http://img.mabach.cn/axios.js"></script>
<script th:inline="javascript">
    new Vue({
        el: '#app',

        data:{
            username:"",
            password:"",
            msg:"",
            openId:[[${socialUser.openId}]],


        },
        methods:{
            submitForm () {
                postId=this.openId

                axios.post(`/api-oauth/register/qq?username=${this.username}&password=${this.password}&openId=${this.openId}`).then(response => {
                    if (response.data.flag){




                    window.location="/api-oauth/preqq?openId="+postId;


                    }else{

                    }
                })
            },



            //





    }



    })
</script>
</html>

